<template>
    <div class="store-goods">
        <span class="buy-icon" v-if="!biggerSwiper">
            <span class="width-height-full displayBlock positionR">
                <router-link class="buy-icon-img" to="/order/cart">
                    <img class="buy-icon-img" src="../../assets/images/cart/buy_icon.png" alt="">
                </router-link>
                <span class="cart-number" v-if="cartGoodsLength">{{cartGoodsLength}}</span>
            </span>
        </span>
        <!--        <transition name="swiperShowHide"-->
        <!--                    enter-active-class="animated fadeIn"-->
        <!--                    leave-active-class="animated fadeOut"></transition>-->
        <div class="no-data-wrap"
            v-if="(Array.isArray(storeGoodsMsg.list) && storeGoodsMsg.list.length == 0) || (Object.keys(storeGoodsMsg).includes('list') && !storeGoodsMsg.list)">
            <v-no-data v-if="nodata"
                :noDataProps="{text:'暂无内容哦～',imgUrl:staticImageUrl('/images/look/no_comment_list1.png')}"></v-no-data>
            <wx-share-body></wx-share-body>
        </div>
        <full-img-video-swiper
            v-else-if="biggerSwiper && storeGoodsMsg && storeGoodsMsg.list && storeGoodsMsg.list.length > 0 && showSwiper"
            :swiperContentProp="storeGoodsSwiper" ref="fullImgVideoSwiper" @share="shareShow" @nowIndex="nowIndex"
            @initGoodsMsg="initGoodsMsg" @onTransitionEnd="onTransitionEnd">
            <div slot="swiperIn" slot-scope="swiperItem">
                <div v-if="swiperItem.swiperItem">
                    <goods-msg v-if="storeGoodsBox[swiperItem.index] && storeGoodsBox[swiperItem.index].isShow"
                        ref="goodsBox" @closeGoodsBox="closeGoodsBox(swiperItem.index)" @buyNow="buyNow"
                        @addCart="addCart" @showGoodsDetail="showGoodsDetailFn"
                        :goodsMsgProp="storeGoodsBox[swiperItem.index].storeGoodsBoxMsg"></goods-msg>
                    <!--小球飞入效果-->
                    <transition name="smallBall" @enter="ballEnter(swiperItem.swiperItem,swiperItem.index)">
                        <!-- v-if="boxItem.needSmallBall && showBallIndex == boxKey"-->
                        <img class="buy-item-img small-ball positionAbCenter" ref="needSmallBall"
                            v-if="showBall && swiperIndex == swiperItem.index"
                            :src="swiperItem.swiperItem.images[0] || swiperItem.mediaContents[0].coverImg" />
                    </transition>
                    <user-handle-icons ref="shareCollectSpeak" class="user-handle-icon"
                        v-if="shareMsg(swiperItem.swiperItem,swiperItem.index) && Object.keys(shareMsg(swiperItem.swiperItem,swiperItem.index)).length > 0"
                        :rtCommontProps="shareMsg(swiperItem.swiperItem,swiperItem.index)"
                        :commentListProps="commentListProps" :discountList="discountListProp"
                        :goodsDetailProps="goodsDetailProps" @wxShareCb="wxShareCb"
                        @getUserMainComment="getUserMainComment" @getSubCommentList="getSubCommentList"
                        @doComment="doComment" @isLike="isLike" @closeCommentCB="bottomFloor=true"
                        @showShare="shareShow" @toCart="toCart" @isBigger="isBigger">
                    </user-handle-icons>
                </div>
            </div>
        </full-img-video-swiper>
        <div v-else-if="!biggerSwiper && storeGoodsMsg && storeGoodsMsg.list && storeGoodsMsg.list.length > 0"
            class="goods-boxs-wrap">
            <goods-boxs ref="goodsBoxs" :goodsBoxsProp="dealGoodsBoxItem(storeGoodsMsg.list)" @clickItem="clickItem"
                @updateGoodsMsg="updateGoodsMsg" @finishAnimation="finishAnimation" @addCart="addCart"></goods-boxs>
        </div>
        <div class="blur-img"
            v-if="!biggerSwiper && storeGoodsMsg && storeGoodsMsg.list && storeGoodsMsg.list.length > 0"></div>
        <!--商品详情-->
        <goods-detail v-if="showGoodsDetail" :goodsDetailProps="goodsDetailProps" ref="goodsDetail" @buyNow="buyNow"
            @addCart="addCart" @closeGoodsDetail="showGoodsDetail=false" @clickBoxItem="linkToStore"></goods-detail>
        <!--显示选择商品款式的弹出框-->
        <goods-specification ref="goodsSpecification" v-if="showGoodsStyle"
            :goodsSpecificationProps="goodsSpecificationMsg" @addCart="addCart" @buyNow="buyNow">
        </goods-specification>
        <slide-left :slideLeftProp="slideLeft" ref="slideLeft" @closeSlideBottom="closeSlideBottom">
            <div slot="slideContent">
                <goods-menus :goodsMsgListProp="storeGoodsMsg.list" @choiseClassify="choiseClassify"
                    @toSwiperIndex="toSwiperIndex" :goodsClassifyListProp="goodsClassifyList">
                </goods-menus>
            </div>
        </slide-left>
        <bottom-floor
            v-if="false && bottomFloor && goodsClassifyList && goodsClassifyList.length > 0 && storeGoodsMsg && storeGoodsMsg.list && storeGoodsMsg.list.length > 0"
            :goodsMsgListProp="storeGoodsMsg.list" @choiseClassify="choiseClassify" @toSwiperIndex="toSwiperIndex"
            :goodsClassifyListProp="goodsClassifyList"></bottom-floor>
    </div>
</template>

<script>
import FullImgVideoSwiper from "../../components/commonActModel/panoramaVideoSwiper/FullImgVideoSwiper";
import common from '../../components/commonMethods/common'
import { mapState, mapMutations, mapGetters } from 'vuex';
import GoodsBox from '../../components/commonComponents/boxItem/GoodsBox';
common.iosAutoplay()
export default {
    name: "StoreGoods",
    props: {
        rtCommontProps: {
            type: Object
        },
        discountListProp: {
            type: Array
        }
    },
    data () {
        return {
            storeId: '',
            rtCommont: {},
            swiperIndex: 0,
            goodsSpecificationMsg: {},//多款的弹出框数据
            showGoodsDetail: false,//商品详情弹框
            showGoodsStyle: false,//购物车选项弹框
            bottomFloor: true,//底部的商品分类
            slideMenus: true,//侧边栏的商品分类
            goodsDetailProps: {},//商品详情
            biggerSwiper: false,//是否使用大图
            slideSmallShow: false,
            slideLeft: {},
            showSwiper: true,//用于刷新swiper不重新刷新的情况
            nowWrapSwiperIndex: 0,
            menuType: 1,
            menuId: 1,
            showBall: false,//展示小球飞入效果
            nodata: false,
            commentListProps: { userHendleType: 'module5' },//侧边栏评论分享等
            commentList: {
            },//重造commentList
            storeGoodsSwiper: {},
            storeGoodsBox: [
                // {
                //     isShow:false,
                //     storeGoodsBoxMsg:{},
                //
                // }
            ],
            storeGoodsMsg: {
                pageSize: 10,
                // "totalPages": 2,//总页数
                // "totalCount": 6,//总条数
                // "curPage": 1,//当前页数
                // "classId":0,//分类
                list: [
                    // {
                    //     "itemId": 514,                     //----------商品的id
                    //     "itemTitle": "大大咧咧",            //--------商品名称
                    //     "images": [                 //-----------头部轮播图片
                    //         "https://3333333335.jpg",
                    //         "https://3453453445.jpg"
                    //     ],
                    //     "currencyType": 0,
                    //     "currency": "￥",
                    //     "markStr": "砍价",            //------------活动标示文字
                    //     "price": "59.5",            //----------商品价格
                    //     "buyerNum": 5,               //------------已购买人数
                    //     "hadLiked": false,          //------------对应商品是否点赞
                    //     "dataInfo": {
                    //         "commentedNum": 0,        //--------评论数量
                    //         "visitNum": 0,            //--------访问数量
                    //         "shareNum": 0,            //--------分享数量
                    //         "likeNum": 0              //--------点赞数量
                    //     },
                    //     "add2Cart":true,          //------------商品是否已经加入购物车
                    //     "userCartItemNum": 2,     //---------用户购物车商品数量
                    //     "itemCode": "123asd",           //------------商品货号
                    //     "quantity": 188,          //------------商品总库存
                    //     "saleMode": 0,          //------------售出方式 0-单款  1-多款
                    //     "maxBuyNum": 10,         //------------个人可购买的最大数量(单款有效)
                    //     "maxWarn": "个人限购10件",          //------------超过最大购买数时的预警文案(单款有效)
                    //     "itemServerals":[           //--------多款信息
                    //         {
                    //             "styleName":"A款",             //-----------款名
                    //             "styleImg":"https://3333333335.jpg",            //-----------款式图
                    //             "price":"18.9",         //-----------售价
                    //             "quantity": 14,         //-----------款库存，如果为0，置灰
                    //             "maxBuyNum": 10,          //------------个人可购买的最大数量
                    //             "maxWarn": "个人限购10件",          //------------超过最大购买数时的预警文案
                    //         }
                    //     ]
                    //     "curItemNumInCart": 1,//------------用户购物车中该商品的数量
                    // }
                ]
            },
            /*由于swiper里面不能太多swiper ，所以要把swiper控制在10个以内，暂时不用*/
            // swiperStoreGoodsMsg:{
            // },
            goodsClassifyList: [],
        }
    },
    created () {
        this.storeId = this.$route.query.storeId || 0;
        this.getGoodsClassify();
    },
    mounted () {

        this.storeId = this.$route.query && this.$route.query.storeId ? this.$route.query.storeId : null;
        this.menuType = this.$route.query && this.$route.query.menuType ? this.$route.query.menuType : 0
        this.menuId = this.$route.query && this.$route.query.menuId ? this.$route.query.menuId : 0;
        let shareId = this.$route.query && this.$route.query.shareId ? this.$route.query.shareId : 0;
        let tempObj = {
            storeId: this.storeId,
            menuType: this.menuType,
            menuId: this.menuId,
        };
        this.initGoodsMsg(tempObj);
        if (window.sessionStorage.getItem('isBigger') && window.sessionStorage.getItem('isBigger') != 'false') {
            this.isBigger(true);
        } else if (shareId != 0) {
            this.isBigger(true);
        }
        else {
            this.isBigger(false);
        }
    },
    computed: {
        ...mapState({
            cartGoodsLength: state => state.api.cartObj.cartGoodsLength,
            mediaId: state => state.logic.mediaId,
        }),
        ...mapGetters({
            currentStore: 'currentStoreFn',
            currentUser: 'currentUserFn',
            cartModuleMsg: 'getCartModuleMsg',
            storeMenu: 'getterStoreMenu'
        })
        // cartGoodsLength(){
        //     // return this.$store.getters.getCartObj().cartGoodsLength;
        // },
    },
    methods: {
        ...mapMutations(['storeGoodsApi', 'updateStoreMenu', 'isLike', 'shareShow']),
        initGoodsMsg (obj) {
            let that = this;
            let classId = obj && obj.classId ? obj.classId : 0;
            let pageNum = obj && obj.curPage ? obj.curPage : 1;
            let headItemId = this.$route.query && this.$route.query.shareId ? this.$route.query.shareId : 0;
            if (window.sessionStorage.getItem('isBigger') && window.sessionStorage.getItem('isBigger') != 'false' && classId == 0) {
                headItemId = window.sessionStorage.getItem('mediaId')
            }
            let paramas = {
                "pageNum": pageNum,
                // "pageSize": that.storeGoodsMsg.pageSize,
                "pageSize": 20,
                "classId": classId,
                "userId": that.userId,
                "headItemId": headItemId,
                "storeId": that.storeId,
                successFn
            };
            this.storeGoodsApi(paramas)
            function successFn (data) {
                that.showSwiper = false;
                setTimeout(() => {
                    that.showSwiper = true;
                    that.nodata = true;
                    let tempObj = { storeId: that.storeId, isNeedServer: false };
                    let goodsTempObj = { classId: classId, totalPages: data.totalPages };
                    if (obj && obj.isMore) {
                        if (data && data.list && data.list.length > 0) {
                            goodsTempObj.list = that.storeGoodsMsg.list;
                            goodsTempObj.list.push(...data.list);
                        }
                    } else {
                        if (data.list) {
                            that.storeGoodsMsg.list = data.list;
                        } else {
                            that.storeGoodsMsg.list = [];
                        }
                    }
                    that.closeSlideBottom(!that.slideSmallShow);
                    if (!data.list && obj && obj.isMore) {
                        return
                    }
                    that.storeGoodsMsg = Object.assign({}, this.storeGoodsMsg, data, goodsTempObj);
                    that.rtCommont = Object.assign({}, this.rtCommont, data, this.currentStore, tempObj);
                    if (that.storeGoodsMsg && that.storeGoodsMsg.list && that.storeGoodsMsg.list.length > 0) {
                        that.dealStoreMsg(that.storeGoodsMsg);
                    }
                    if (that.storeGoodsMsg.list && that.storeGoodsMsg.list.length > 0) {
                        for (let value in that.storeGoodsMsg.list) {
                            that.goodsBox(that.storeGoodsMsg.list[value], value);
                        }
                    }
                    let notShowClassify = false;
                    /*是否显示分类这两个字*/
                    let classifyStorage = window.localStorage.getItem('notShowClassify') ? true : false;
                    if (classifyStorage) {
                        notShowClassify = true;
                    } else {
                        window.localStorage.setItem('notShowClassify', 'false');
                        notShowClassify = false;
                    }
                    that.slideLeft = Object.assign({}, that.slideLeft, { bordShow: false, text: notShowClassify ? '' : '分类' })
                    /*保证购物车的动画是从下往上滑动的,这里修复第二章图不滑动的bug*/
                    /*获取购物车信息*/
                    that.$store.dispatch('initCartModuleMsg');
                    that.$store.commit('updateCartNumber');
                }, 10)
            }
        },
        shareMsg (obj, index) {
            let that = this;
            let temp = {
                dataInfo: obj.dataInfo,
                hadLiked: obj.hadLiked,
                likeType: 3,
                mediaContents: obj.mediaContents,
                paginationType: 2,
                mediaType: obj.mediaType,
                id: obj.itemId,
                isNeedContentShare: false,
                storeId: that.rtCommont.storeId || 0,
                latitude: that.rtCommont.latitude,
                longitude: that.rtCommont.longitude,
                // isNeedServer:that.rtCommont.isNeedServer,
                isNeedServer: true,
                showBiggerIcon: true,
                showBuyIcon: true,
            };
            /*"storeId": 105,
                "id":0,*/
            return temp;
        },
        commontMsg (obj) {
            let that = this;
            let tempArray = []
            if (Array.isArray(obj) && Array.length > 0) {
                obj.forEach((value, index) => {
                    tempArray.push(that.shareMsg(value, index));
                })
            }
            return tempArray
        },
        initCommentList (val) {
            this.commentList = {

            }
        },
        /*分享成功的回调*/
        wxShareCb (params) {
            let that = this;
            this.shareShow(false);
            console.log('wxParams', params);
            if (!params) {
                return
            }
            if (that.rtCommont && Array.isArray(that.rtCommont.list) && that.rtCommont.list.length > 0) {
                that.rtCommont.list.forEach((value, index) => {
                    if (params.shareId == value.itemId) {
                        value.dataInfo.shareNum += 1;
                        that.rtCommont.list.splice(index, 1, value)
                    }
                })
            }
        },
        buyNow (obj) {
            let that = this;
            let tempArray = [];
            if (obj) {
                if (Array.isArray(obj)) {
                    obj.forEach((value, index) => {
                        let tempObj = {}
                        tempObj = {
                            itemId: value.itemId,
                            styleName: value.serveralType || null,
                            buyNum: value.number || 1,
                        }
                        tempArray.push(tempObj);
                    })
                } else {
                    let tempObj = {
                        itemId: obj.itemId,
                        styleName: obj.serveralType || null,
                        buyNum: obj.number || 1,
                    };
                    tempArray.push(tempObj);
                }

                that.storeGoodsMsg.list.forEach((value, index) => {
                    /*不管是单款还是多款都直接拉出弹框*/
                    if (value.itemId == obj.itemId) {
                        if (obj.openAlert) {
                            that.openGoodsSpecification(obj);
                        } else {
                            that.$store.commit('sureOrder', tempArray);
                            // that.$router.push('/order/sure');
                            window.location.href = '/order/sure'
                        }
                    }
                })
            }
            // that.openGoodsSpecification()
        },
        openGoodsSpecification (obj) {
            if (obj.belongSwiperIndex) {
                this.goodsSpecificationMsg = this.storeGoodsMsg.list[obj.belongSwiperIndex];
            } else if (this.swiperIndex || this.swiperIndex == 0) {
                this.goodsSpecificationMsg = this.storeGoodsMsg.list[this.swiperIndex];
            }
            this.showGoodsStyle = true;
            setTimeout(() => {
                this.$refs.goodsSpecification.opeSlideBottom();
            }, 100)
        },
        addCart (obj) {
            /*如果是单款直接加入购物车，如果是多款要选择款式*/
            let that = this;
            if (obj) {
                for (let key in that.storeGoodsMsg.list) {
                    if (that.storeGoodsMsg.list[key].itemId == obj.itemId) {
                        if (that.storeGoodsMsg.list[key].saleMode == 0) {
                            //单款
                            that.addCartAjax(obj);
                        } else if (that.storeGoodsMsg.list[key].saleMode == 1) {
                            /*如果没有选择款式*/
                            if (!obj.serveralType) {
                                //多款打开弹出框
                                this.openGoodsSpecification(obj);
                            } else {
                                //加入购物车
                                that.addCartAjax(obj);
                            }
                        }
                    }
                }
            }
        },
        addCartAjax (obj) {
            let that = this;
            let url = `${that.NW_API_API_LOCALE_VERSION}/shopping/cart/add/item`;
            let dealIndex = 0;
            let params = {
                "userId": that.userId,          //-------用户ID
                "storeId": that.storeId,          //-------店铺ID
                "itemId": obj.itemId,           //-------商品ID
                "serveralType": obj.serveralType || null,     //-------款式名字 （购买款式，单款则不传）
                "buyNum": obj.buyNum || 1              //-------购买数量（不能为0）
            };
            that.xurl.postDataJsonLoading(url, params).then((data) => {
                if (data.success) {
                    that.$root.$emit('toast', { 'msg': '加入购物车成功' })
                    if (obj && obj.needAddAnmation && this.$refs.goodsBoxs && this.$refs.goodsBoxs.showSmallBall) {
                        this.$refs.goodsBoxs.showSmallBall(obj);
                    } else {
                        this.showBall = true;
                    }
                    if (obj.belongSwiperIndex) {
                        dealIndex = obj.belongSwiperIndex;
                    } else if (obj.itemId) {
                        that.storeGoodsBox.forEach((value, index) => {
                            if (value.storeGoodsBoxMsg.itemId == obj.itemId) {
                                dealIndex = index;
                            }
                        })
                    }
                    that.storeGoodsBox[dealIndex].storeGoodsBoxMsg.add2Cart = true;
                    /*加入购物车之后，后台有接口加入购物车之后改变购物车商品的个数*/
                    let url = `${that.NW_API_API_LOCALE_VERSION}/shopping/cart/user/${this.userId}/item/number`;
                    this.xurl.get(url).then((data) => {
                        that.storeGoodsBox.forEach((value, index) => {
                            if (value.storeGoodsBoxMsg.add2Cart) {
                                that.storeGoodsBox[index].storeGoodsBoxMsg.userCartItemNum = data.result;
                            }
                        });
                        that.storeGoodsBox[dealIndex].storeGoodsBoxMsg = Object.assign({}, that.storeGoodsBox[dealIndex].storeGoodsBoxMsg)
                        if (that.$refs.goodsBox && that.$refs.goodsBox[dealIndex] && that.$refs.goodsBox[dealIndex].goodsBox) {
                            that.$refs.goodsBox[dealIndex].goodsBox = Object.assign({}, that.$refs.goodsBox[dealIndex].goodsBox)
                        }
                    });
                    if (this.$refs.goodsSpecification) {
                        this.$refs.goodsSpecification.closeSlideBottom();
                    }
                } else if (data.errMsg) {
                    that.$root.$emit('toast', { 'msg': data.errMsg })
                } else {
                    that.$root.$emit('toast', { 'msg': '加入购物车失败' })
                }
            })
        },
        linkToStore () {
        },
        dealStoreMsg (obj) {
            let that = this;
            let tempList = [];
            let tempStoreMsg = {};
            let promotionInfo = {};
            let promotionFloats = [];
            if (Array.isArray(obj.list) && obj.list.length > 0) {
                obj.list.forEach((value, index) => {
                    tempStoreMsg = {
                        "belongStoreInfo": {
                            storeId: that.storeId,
                        },
                        "images": value.images,
                        "hadLike": value.hadLike,
                        "itemId": value.itemId,
                        "mediaType": value.mediaType,
                        "mediaContents": value.mediaContents,
                        "poster": value.poster,
                        "dataInfo": value.dataInfo,
                    }
                    tempList.push(tempStoreMsg);
                })
                let tempObj = {
                    pageSize: tempList.length,
                    notShow: false,
                    initialSlide: 0,
                    headerMsg: '',
                    list: tempList,
                }
                this.storeGoodsSwiper = Object.assign({}, this.storeGoodsSwiper, tempObj);
            }
        },
        /*获取商品分类*/
        getGoodsClassify () {
            let url = `${this.NW_API_API_LOCALE_VERSION}/item/class/store/${this.storeId} `;
            this.xurl.get(url).then((data) => {
                if (data.success) {
                    this.goodsClassifyList = data.list;
                } else if (data.errMsg) {
                    this.$root.$emit('toast', { msg: data.errMsg });
                } else {
                    console.log('获取商品分类失败')
                }
            })
        },
        choiseClassify (classId, index) {
            this.initGoodsMsg({ classId, notHref: true })
        },
        nowIndex (index) {
            /*swiper滑动时修改swiper的下标*/
            let that = this;
            // user-handle-icon
            let totalLength = Number($('.user-handle-icon').eq(this.nowWrapSwiperIndex).find('.total-index').html());
            if (index >= totalLength) {
                $('.user-handle-icon').eq(this.nowWrapSwiperIndex).find('.now-swiper-index').html(totalLength)
            } else {
                $('.user-handle-icon').eq(this.nowWrapSwiperIndex).find('.now-swiper-index').html(index);
            }
            // if(that.$refs.shareCollectSpeak){
            //     that.$refs.shareCollectSpeak.nowIndex(index);
            // }
        },
        /*商品详情的弹出框*/
        showGoodsDetailFn (itemId) {
            let that = this;
            let url = `${this.NW_API_API_LOCALE_VERSION}/item/${itemId}/detail`;

            this.xurl.getLoading(url).then((data) => {
                if (data.success) {
                    let tempstoreGoodsObj = this.storeGoodsMsg;
                    for (let value of tempstoreGoodsObj.list) {
                        if (value.itemId == itemId) {
                            let urlCommont = `${this.NW_API_API_LOCALE_VERSION}/item/${itemId}/buyerShow?pageSize=10&pageNum=1`;
                            // let tempObj = {
                            //     itemId:itemId,
                            //     storeId:that.storeId,
                            //     title:value.itemTitle,
                            //     currency:value.currency || "￥" ,
                            //     price:value.price ,//商品价格
                            //     description:value.markStr,//商品描述
                            //     imgList:value.detailImgs,//商品详情轮播图的图片，
                            // };
                            let tempObj = {
                                itemId: itemId,
                                storeId: that.storeId,
                                title: data.result.title,
                                currency: data.result.priceUnit || "￥",
                                price: data.result.price,//商品价格
                                description: value.markStr,//商品描述
                                imgList: data.result.detailImgs,//商品详情轮播图的图片，
                            };
                            this.goodsDetailProps = tempObj;
                            this.showGoodsDetail = true;
                            /*TODO 买家秀和为你推荐现在接口没有先放这里*/
                            // this.xurl.get(urlCommont).then((data)=>{
                            //     if(data.success){
                            //         let buyTemp = {};
                            //         let tempList = [];
                            //         if(Array.isArray(data.list) && data.list.length > 0){
                            //             for(let value of data.list){
                            //                 buyTemp={
                            //                     storeId:that.storeId,
                            //                     type:2,
                            //                     itemId:value.itemId,//商品id
                            //                     currency:"￥",/*金币的符号*/
                            //                     url:value.mediaContents.url,/*@url 图片或者视频的url*/
                            //                     itemTitle:value.comment,/*@description 描述*/
                            //                 };
                            //                 tempList.push(buyTemp);
                            //             }
                            //             tempObj.modlueList=[
                            //                 {
                            //                     title:'买家秀',
                            //                     list:tempList,
                            //                 }
                            //             ]
                            //         }
                            //
                            //     }
                            //     this.goodsDetailProps = tempObj;
                            //     this.showGoodsDetail = true;
                            // });
                            break;
                        }
                    }

                } else if (data.errMsg) {
                    this.$root.$emit('toast', { msg: data.errMsg });
                } else {
                    console.log('获取商品详情信息失败')
                }
            });
        },
        onTransitionEnd (index) {
            let that = this;
            this.nowWrapSwiperIndex = index.index;
            index = index.index;
            $('.user-handle-icon').each((userHandleVal, userHandleIndex) => {
                $(userHandleIndex).find('.now-swiper-index').html(1);
            })
            if (index > -1 && that.storeGoodsBox && that.storeGoodsBox[index]) {
                for (let value in that.storeGoodsBox) {
                    that.storeGoodsBox[value].isShow = false;
                }
                let storeGoodsBox = that.storeGoodsBox[index];
                that.swiperIndex = index;
                storeGoodsBox.isShow = true;
                that.storeGoodsBox.splice(index, 1, storeGoodsBox)
                setTimeout(() => {
                    this.$refs.fullImgVideoSwiper.swiperSlideEnd(index)
                })
            }
        },
        closeGoodsBox (index) {
            this.storeGoodsBox[index].isShow = false;
            this.storeGoodsBox.splice(index, 1, this.storeGoodsBox[index]);
        },
        getUserMainComment (obj) {
            this.bottomFloor = false;
            this.$emit('getUserMainComment', obj)
        },
        getSubCommentList (obj) {
            this.$emit('getSubCommentList', obj)
        },
        doComment (obj) {
            this.$emit('doComment', obj)
        },
        // isLike(obj){
        //     this.$emit('isLike',obj)
        // },
        toSwiperIndex (key) {
            this.$refs.mySwiper.swiper.slideTo(key, 500, false);//切换到第一个slide，速度为1秒
        },
        goodsBox (obj, index) {
            let that = this;
            let tempObj = {
                isShow: true,
                storeGoodsBoxMsg: {
                    storeId: that.$route.query.storeId,
                    belongSwiperIndex: index,
                    title: obj.itemTitle,
                    currency: obj.currency,
                    price: obj.price,
                    itemId: obj.itemId,
                    userCartItemNum: obj.userCartItemNum,//用户购物车商品数量
                    add2Cart: obj.add2Cart,//商品是否已经加入购物车
                },
            };
            this.storeGoodsBox.splice(index, 1, tempObj);
        },
        clickItem (boxItem, boxKey) {
            let that = this;
            this.storeGoodsMsg.list.forEach((value, index) => {
                if (boxItem.itemId == value.itemId) {
                    that.nowWrapSwiperIndex = index;
                    that.storeGoodsSwiper.initialSlide = index;
                }
            })
            this.isBigger(true)
        },
        isBigger (boolean) {
            this.biggerSwiper = boolean;
            window.sessionStorage.setItem('isBigger', boolean);
        },
        toCart (boolean) {
            this.$router.push({ path: '/order/cart' });
        },
        dealGoodsBoxItem (goodsList) {
            let storeId = this.$route.query.storeId;
            let list = [];
            let tempObj = {};
            goodsList.forEach((value, index) => {
                tempObj = {
                    storeId: storeId,
                    type: 4,//1表示两端布局，价格和卖出商品量,2表示一边是评价一边是日期
                    itemId: value.itemId,//商品id
                    currency: value.currency || '￥',/*金币的符号*/
                    url: value.images[0],/*@url 图片或者视频的url*/
                    itemTitle: value.itemTitle,/*@description 描述*/
                    price: value.price,/*@description 价格*/
                    buyerNum: value.curItemNumInCart,/*@buyerNum 已购买件数*/
                    titleOneLine: true,//标题一行显示
                    needSmallBall: true,
                    // time:0,/*@time时间，当type为2时填写*/
                    // userInfo:{header:'',name:'',like:'',num:'',url:'',selectUrl:'',notSelectUrl:''},
                }
                list.push(tempObj);
            });
            return {
                list: list,
                isLazy: true,
                classId: this.storeGoodsMsg.classId,
                totalPages: this.storeGoodsMsg.totalPages,
                // isShowMore:goodsList.length > 6,/*@isShowMore 是否显示查看更多 ，不需要显示查看更多*/
            }
        },
        closeSlideBottom (boolean) {
            let dom = ''
            if (document.getElementsByClassName('box-item')) {
                dom = document.getElementsByClassName('box-item')
            }
            if (boolean) {
                this.slideSmallShow = false;
                setTimeout(() => {
                    if (dom && dom.length > 0) {
                        dom[0].style.transform = 'scale(1)';
                        dom[0].style.height = 'auto';
                    }
                }, 10)
            } else {
                this.slideSmallShow = true;
                setTimeout(() => {
                    if (dom && dom.length > 0) {
                        dom[0].style.transform = 'scale(0.77)';
                        dom[0].style.height = 0.77 * Math.ceil(this.storeGoodsMsg.list.length / 2) * 2.45 + 'rem';
                    }
                }, 10)
            }
        },
        finishAnimation (boxItem) {
            let that = this;
            this.storeGoodsMsg.list.forEach((value, index) => {
                if (boxItem.itemId == value.itemId) {
                    that.storeGoodsMsg.list[index].curItemNumInCart++;
                }
                that.storeGoodsMsg.list.splice(index, 1, that.storeGoodsMsg.list[index]);
            })
            this.$store.dispatch('initCartModuleMsg');
            this.$store.commit('updateCartNumber');
        },
        updateGoodsMsg (obj, isMore) {
            this.initGoodsMsg(obj)
        },
        ballEnter (msg, index) {
            let that = this;
            this.$refs.needSmallBall.style.transition = 'all 500ms';
            this.$refs.needSmallBall.style.transformOrigin = 'center center';
            setTimeout(() => {
                this.$refs.needSmallBall.style.width = '.28rem';
                this.$refs.needSmallBall.style.height = '.28rem';

                let iconPos = this.getDomLeaveScreen(document.getElementsByClassName('buy-icon')[0]);
                let iconOffsetX = iconPos.left;
                let iconOffsetY = iconPos.top;

                let domPos = this.getDomLeaveScreen(that.$refs.needSmallBall);
                let domX = domPos.left;
                let domY = domPos.top - this.swiperIndex * document.documentElement.clientHeight;
                let domClientWidth = document.getElementsByClassName('buy-icon')[0].clientWidth;
                let domClientHeight = document.getElementsByClassName('buy-icon')[0].clientHeight;

                let domLeft = iconOffsetX - domX - 2 * domClientWidth;//这里不应该乘以2，但是由于购物袋和小球大小一样所以用乘以2
                let domTop = iconOffsetY - domY - 2 * domClientHeight;
                setTimeout(() => {
                    this.$refs.needSmallBall.style.transform = 'translate(' + domLeft + 'px,' + domTop + 'px)';
                    setTimeout(() => {
                        that.showBall = false;
                        that.finishAnimation(msg);
                    }, 400)
                }, 400)
            }, 10)
        },
    },
    watch: {
        biggerSwiper (val) {
            if (this.$refs.slideLeft) {
                this.$refs.slideLeft.clickBord();
            }
        }
    },
    components: {
        'full-height-swiper': () => import('../../components/commonComponents/swiperComponent/FullHeightSwiper'),
        /*TODO 这是要用swiper和video的形式*/
        'full-img-video-swiper': FullImgVideoSwiper,
        // "full-height-video":()=>import("../../components/commonActModel/video/FullHeightVideo"),
        // "full-pamprama":()=>import("../../components/commonComponents/panorama/Panorama"),
        // 'rt-share-collect-speak':()=>import('../../components/commonActModel/userHandleIcons/RtShareCollectSpeak'),
        'user-handle-icons': () => import('../../components/commonActModel/userHandleIcons/UserHandleIcons'),
        'slide-left': () => import('../../components/commonComponents/slideLeft/SlideLeftComponents'),
        'goods-menus': () => import('./components/goods/GoodsMenus'),
        'goods-box': () => import('./components/BottomBuyBox'),
        'goods-msg': () => import('./components/GoodsMsg'),
        'goods-boxs': GoodsBox,
        'goods-detail': () => import('./components/goods/GoodsDetail'),
        'goods-specification': () => import('./components/goods/GoodsSpecification'),
        "v-no-data": () => import("../../components/commonActModel/noData/NoData"),
        'bottom-floor': () => import('./components/BottomFloor'),
        'wx-share-body': () => import('../../components/wx/WxShareBody'),
    },
    /*FullImgVideoSwiper*/
}
</script>

<style scoped lang="scss">
.store-goods {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    /*background-image: -webkit-linear-gradient(rgba(0,0,0,.3) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,0)80%,rgba(0,0,0,.3) 100%) ;*/
    /*background-image: linear-gradient(rgba(0,0,0,.3) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,0)80%,rgba(0,0,0,.3) 100%) ;*/
}
.blur-img {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    filter: blur(40px);
    width: 100%;
    z-index: -1;
}
.store-goods /deep/ {
    .no-wcomment {
        z-index: 1;
    }
    .scroll-contain {
        padding: 1rem 0.11rem 0;
    }
    .slide-bottom-transition,
    .out-icon {
        background-color: rgba(255, 255, 255, 1);
    }
    .slide-bottom-transition {
        z-index: 1061;
    }
    .loading-layer {
        display: none !important;
    }
}
.no-data-wrap {
    height: 100vh;
}
.goods-boxs-wrap {
    padding-top: 1rem;
}
.goods-boxs-wrap /deep/ {
    .buy-item-wuser {
        transition: all 300ms;
        overflow: unset;
    }
    .buy-item-img {
        transition: all 300ms;
    }
    .buy-item-wrap {
        overflow: unset;
    }
}
.buy-icon {
    position: absolute;
    right: 0.16rem;
    top: 1.15rem;
    width: 0.32rem;
    height: 0.32rem;
    z-index: 1;
}
.buy-icon-img {
    width: 100%;
    height: 100%;
}
.cart-number {
    position: absolute;
    display: inline-block;
    color: #fff;
    border-radius: 0.25rem;
    padding: 0.02rem 0.02rem;
    background-color: #ff4242;
    left: 0.15rem;
    transform: scale(0.7);
    top: -0.08rem;
    min-width: 0.15rem;
}
.buy-item-img {
    transition: all 300ms;
}
.small-ball {
    width: 1.6rem;
    height: 1.6rem;
    transform-origin: center center;
    border-radius: 50%;
    z-index: 1;
}
</style>